<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>双向数据实现原理</title>
</head>
<body>
<div id="app">
    <input type="text" id="txt">
    <p id="show"></p>
</div>
<script type="text/javascript">
    var obj = {};
    Object.defineProperty(obj, 'txt', {
        get: function () {
            return obj
        },
        set: function (newValue) {
            document.getElementById('txt').value = newValue;
            document.getElementById('show').innerHTML = newValue
        }
    });
    document.addEventListener('keyup', function (e) {
        obj.txt = e.target.value
    })
</script>
</body>
</html>


<!--<!doctype html>-->
<!--<html lang="en">-->
<!--<head>-->
    <!--<meta charset="UTF-8">-->
    <!--<meta name="viewport"-->
          <!--content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">-->
    <!--<meta http-equiv="X-UA-Compatible" content="ie=edge">-->
    <!--<title>Document</title>-->
<!--</head>-->
<!--<body>-->
<!--<p>-->
    <!--input1=><input type="text" id="input1">-->
<!--</p>-->
<!--<p>-->
    <!--input2=>-->
    <!--<input type="text" id="input2">-->
<!--</p>-->
<!--<div>-->
    <!--我每次比input1的值加1=>-->
    <!--<span id="span"></span>-->
<!--</div>-->
<!--<script>-->
    <!--var oInput1 = document.getElementById('input1');-->
    <!--var oInput2 = document.getElementById('input2');-->
    <!--var oSpan = document.getElementById('span');-->
    <!--var obj = {};-->
    <!--Object.defineProperties(obj, {-->
        <!--val1: {-->
            <!--configurable: true,-->
            <!--get: function () {-->
                <!--oInput1.value = 0;-->
                <!--oInput2.value = 0;-->
                <!--oSpan.innerHTML = 0;-->
                <!--return 0-->
            <!--},-->
            <!--set: function (newValue) {-->
                <!--oInput2.value = newValue;-->
                <!--oSpan.innerHTML = Number(newValue) ? Number(newValue) : 0-->
            <!--}-->
        <!--},-->
        <!--val2: {-->
            <!--configurable: true,-->
            <!--get: function () {-->
                <!--oInput1.value = 0;-->
                <!--oInput2.value = 0;-->
                <!--oSpan.innerHTML = 0;-->
                <!--return 0-->
            <!--},-->
            <!--set: function (newValue) {-->
                <!--oInput1.value = newValue;-->
                <!--oSpan.innerHTML = Number(newValue) + 1;-->
            <!--}-->
        <!--}-->
    <!--});-->
    <!--oInput1.value = obj.val1;-->
    <!--oInput1.addEventListener('keyup', function () {-->
        <!--obj.val1 = oInput1.value;-->
    <!--}, false);-->
    <!--oInput2.addEventListener('keyup', function () {-->
        <!--obj.val2 = oInput2.value;-->
    <!--}, false)-->
<!--</script>-->


<!--</body>-->
<!--</html>-->